<template>
    <div id="starCollect" style="width: 100%; height: 100%"></div>
</template>
 
 <script>
 import {
   Themes,
   lightningChart,
   AxisTickStrategies,
   PalettedFill,
   emptyFill,
   LUT,
   ColorRGBA
 } from '@arction/lcjs'
 
 export default {
   name: 'waterFallPage',
   data () {
     return {
       startX: 0,
       range: 200
     }
   },
   mounted () {
     // this.initWebSocket();
     this.initChart()
   },
   methods: {
       getXWaterfall (a, b) {
           let range
           switch (b) {
           case 0 : range = 100; break
           case 1 : range = 50; break
           case 2 : range = 12.5; break
           }
           this.startX = a - range
           this.range = range
           // console.log(this.startX,this.range,'pubu')
           this.initChart()
       },
       initChart () {
           // 设置图表
           this.waterFallChart = this.setupChart(
               {
                   columnIndex: 0,
                   columnSpan: 1,
                   rowIndex: 1,
                   rowSpan: 1,
                   container: 'waterFallCollect',
                   theme: Themes.darkTurquoise
               },
               '瀑布图',
               '频率/MHz',
               '时间/S',
               [0, 30]
           )

           // 单独设置图表样式
           this.waterFallChart
               .getDefaultAxisY()
               .setTickStrategy(AxisTickStrategies.Empty) // 禁用自动刻度
               .setTitleFillStyle(emptyFill) // 禁用自动标题

           this.waterFallSeries = this.setupIntensitySeries(
               this.waterFallChart,
               8000,
               50,
               this.startX,
               this.range,
               '瀑布图数据'
           )

           // 设置提示框
           this.waterFallSeries
               .setMouseInteractions(false)
               .setCursorInterpolationEnabled(false)
               .setCursorResultTableFormatter((tableBuilder, series, x, y) =>
               tableBuilder
                   .addRow(series.getName())
                   .addRow('频率', series.axisX.formatValue(x), 'MHz')
                   .addRow('强度', series.axisY.formatValue(y), 'dBm')
               )

           this.waterFallAxis = this.waterFallChart.addAxisY()
           this.waterFallAxis
               .setMouseInteractions(false)
               .setTitle('Time (s)')
               .setTitleFont((f) => f.setSize(13))
               .setTitleMargin(-5)
               .setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) =>
               tickStrategy.setMajorTickStyle((tickStyle) =>
                   tickStyle
                   .setTickPadding(0)
                   .setLabelPadding(-5)
                   .setLabelFont((f) => f.setSize(12))
               )
               )
           },

           // onReceiveKdSpec(specInfo) {
           //   let dataList = specInfo.ps_data;
           //   let xyData = [];
           //   let yData = [];
           //   let maxXyData = [];
           //   for (let i = 0; i < dataList.length; i++) {
           //     xyData.push({ x: i, y: dataList[i] + Math.random() * 20 });
           //   }
           //   xyData.forEach((item) => {
           //     yData.push(item.y);
           //   });
           //   if (this.isKdPause == true) {
           //     return;
           //   }
           //   this.addData(xyData, yData, maxXyData);
           // },
           // //填数据
           // addData(xyData, yData, maxXyData) {
           //   this.waterFallSeries.addRow(1, 'value', [yData]);
           // },

           // 设置系列
       setupIntensitySeries (chart, columnCount, columnLength, xStart, xRange, name) {
           const palette = new LUT({
               steps: [
               { value: -150, color: ColorRGBA(0, 0, 255) },
               { value: -150 * 0.6, color: ColorRGBA(0, 255, 255) },
               { value: -85, color: ColorRGBA(255, 255, 0) },
               { value: -150 * 0.3, color: ColorRGBA(0, 255, 255) },
               { value: 30, color: ColorRGBA(0, 0, 255) }
               ],
               interpolate: true
           })
           const series = chart
               .addHeatmapSeries({
               columns: columnCount,
               rows: columnLength,
               start: { x: xStart, y: 0 },
               end: { x: xStart + xRange * 2, y: 1024 },
               pixelate: true, //像素化
               })
               .setFillStyle(new PalettedFill({ lut: palette }))
               .setName(name)
               .setCursorEnabled(false) // 移除光标
               .setMouseInteractions(false)
           // 图例框
           // const legend = chart
           //   .addLegendBox()
           //   .setAutoDispose({
           //     type: 'max-width',
           //     maxWidth: 0.3,
           //   })
           //   .add(chart);
           return series
       },

       // 设置图表
       setupChart (options, title, xAxisTitle, yAxisTitle) {
           const chart = lightningChart()
               .ChartXY({
               ...options
               })
               .setTitle(title)
               .setPadding({ top: 2, left: 1, right: 6, bottom: 2 })
               .setMouseInteractions(false)
               .setTitleMarginTop(1)

           chart
               .getDefaultAxisX()
               .setTitle(xAxisTitle)
               .setTitleFont((f) => f.setSize(13))
               .setMouseInteractions(false)
               .setTitleMargin(-5)

           chart
               .getDefaultAxisY()
               .setTitle(yAxisTitle)
               .setTitleFont((f) => f.setSize(13))
               .setMouseInteractions(false)
               .setTitleMargin(0)
               .setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) =>
                   tickStrategy.setMajorTickStyle((tickStyle) =>
                       tickStyle.setLabelFont((f) => f.setSize(12))
                   )
               )
           return chart
       },
   }
 }
 </script>
 
 